<template>
  <a-descriptions
    :label-style="{
      textAlign: 'right',
      width: '156px',
      paddingRight: '10px',
      color: 'rgb(var(--gray-8))',
    }"
    :value-style="{ width: '400px' }"
    v-if="data.length > 0"
  >
    <template #title>
      <span class="descriptions-title">{{ title }}</span>
    </template>
    <a-descriptions-item :label="item.label" :span="item.span" v-for="(item, index) in data" :key="index">
      <template v-if="item.slotName">
        <slot :name="item.slotName"></slot>
      </template>
      <template v-else-if="item.render">
        {{ item.render() }}
      </template>
      <template v-else>
        {{ item.value }}
      </template>
    </a-descriptions-item>
  </a-descriptions>
  <div class="descriptions-empty" v-else>
    <div class="descriptions-title">其他联系人</div>
    <a-empty />
  </div>
</template>

<script setup name="EnterpriseBasicInfoDescriptions">
  defineProps({
    title: String,
    data: Array,
  })
</script>

<style lang="less" scoped>
  .descriptions-title {
    font-size: 16px;
    font-weight: 600;
    color: #1d2129;
  }
</style>
